<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>登陆页面</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<style type="text/css">
		body{
			margin:0;
			padding: 0;
		}
		.bgppage{
			background: #F6F6F6
		}
		.head-list{
			float: right;
			padding: 5px;
		}
		input{
			height: 35px;
			border:1px solid pink;
			border-radius: 5px;
		}
		.btn{
			position: relative;
			top: -2px;
		}
		ul{
			border: 2px solid #000;
			padding:0;
			width: 500px;
			height: 300px;
			overflow-x: hidden;
    		overflow-y: auto;
		}
		.rightMe{
			text-align: right;
		}
		.leftOther{
			text-align: left;
		}
	</style>
</head>
<body>
	<div class="container bgppage">
		<div class="container">
			<h1>欢迎 <%=user %> 进入聊天室</h1>
			<ul></ul>
			<input type="text">
			<button onclick="talk()">发送</button>
			<a href="http://localhost:8989/?user=<%=user%>">返回主页面</a>
		</div>
	</div>
	
</body>
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<!-- 引人sotket.io框票自动去node_modules文件夹寻我 -->
<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript">
	$(function(){
		$(window).resize(function(){
			pubuliu();
		})
		pubuliu();
		test()
	})
		
	function pubuliu(){
		let x=window.innerWidth,
			y=window.innerHeight;
		$(".bgppage").css({
			width:x,
			height:y
		});
		
	}
	//引入框架
	let socket=io();
	$('button').click(()=>{
		//发送数据socket.emit('发送的名字和后台接收保持一致',[数据})
		socket.emit('chat',{msg:<%=user%>+'说：'+$('input').val()})
	})
	socket.on('send',(msg)=>{
		console.log(msg.msg,<%=user%>)
		console.log(msg.msg.indexOf('说'))
		let a=msg.msg.indexOf('说')
		let nummsg=msg.msg.substring(0, a)
		if(<%=user%>==nummsg){
			$("ul").append(`<p class="rightMe">${msg.msg}</p>`)
		}else{
			$("ul").append(`<p class="leftOther">${msg.msg}</p>`)
		}
	})
	function talk() {
		$.ajax({
			url:"http://localhost:8989/msg",
			data:{
				msg:$('input:eq(0)').val()
			},
			success:function(res){
				console.log(res)
			}
		})
	}
</script>
</html>